<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Signup Form</title>
  <link rel="stylesheet" href="./signup.css">
  <link rel="icon" href="/favicon.png" type="image/png">

</head>
<body>
  <div class="signup-form-container">
    <h2 class="signup-title">Sign Up</h2>
    <form id="signup-form">
      <div class="inputBox">
        <label for="full-name">Full Name:</label>
        <input type="text" id="full-name" name="full-name" placeholder="Enter your full name" required>
      </div>

      <div class="inputBox">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
      </div>

      <div class="inputBox password-field">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
      </div>

      <div class="inputBox">
        <button type="submit" id="submitBtn">Sign Up</button>
        <button id="google-login" style="color: black; background-image: url(); background-repeat: no-repeat; background-position: 10% 50%; background-size: 30px;"><a href="https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F%3Futm_source%3Dsign_in_no_continue%26pli%3D1%26nlr%3D1&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1211316509%3A1729920929255114&ddm=0">Login with Google</a></button>

        <button id="facbook-login" style="color: black;font-family:var(--ff-poppins); background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg); background-repeat: no-repeat; background-position: 10% 50%; background-size: 30px;"><a href="https://www.facebook.com/login/">Login with facebook</a></button>
        <button id="x-login" style="color: black;font-family:var(--ff-poppins); background-image: url(https://img.freepik.com/free-vector/twitter-new-2023-x-logo-white-background-vector_1017-45422.jpg?t=st=1729705399~exp=1729708999~hmac=86164ca5278d72d1e806212a9399b9f1d09e5db1559733d42425370dbca91851&w=826); background-repeat: no-repeat; background-position: 10% 50%; background-size: 30px;"><a href="https://x.com/i/flow/login">Login with X</a></button>
      </div>
    </form>

    <div id="form-message" class="form-message"></div>
    <a href="./index.html" class="return-link">Return Home</a>
  </div>

  <div id="toast" class="toast"></div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const allowedDomains = ["gmail.com", "outlook.com", "yahoo.com", "protonmail.com", "icloud.com", "tutanota.com"];

      // Load stored data from localStorage if it exists
      const storedSignupData = localStorage.getItem("signupData");
      if (storedSignupData) {
        const formData = JSON.parse(storedSignupData);
        document.getElementById("full-name").value = formData.fullName;
        document.getElementById("email").value = formData.email;
        document.getElementById("password").value = formData.password;
      }

      // Form submission handler
      document.getElementById("signup-form").addEventListener("submit", function (event) {
        event.preventDefault(); // Prevent form submission

        const email = document.getElementById("email").value;
        const emailDomain = email.split("@").pop();

        // Check if email domain is allowed
        if (!allowedDomains.includes(emailDomain)) {
          document.getElementById("form-message").innerText = "Invalid email domain. Please use a valid domain.";
          showToast("Invalid email domain", "error");
          return; // Stop form submission
        }

        // Capture form data
        const formData = {
          fullName: document.getElementById("full-name").value,
          email: email,
          password: document.getElementById("password").value
        };

        // Store data in localStorage
        localStorage.setItem("signupData", JSON.stringify(formData));

        // Display success message and show toast
        document.getElementById("form-message").innerText = "Signup successful!";
        showToast("Signup successful!", "success");

        // Clear form after signup
        document.getElementById("full-name").value = "";
        document.getElementById("email").value = "";
        document.getElementById("password").value = "";

        // Redirect after a short delay
        setTimeout(function () {
          window.location.href = "../login/login.html"; // Redirect to login page after signup
        }, 1500);
      });
    });

    // Toast notification function
    function showToast(message, type) {
      const toast = document.getElementById("toast");
      toast.textContent = message;
      toast.classList.add("show");
      if (type === "success") {
        toast.classList.add("success");
      } else {
        toast.classList.add("error");
      }
      setTimeout(function () {
        toast.classList.remove("show");
        toast.classList.remove("success", "error");
      }, 3000); // Hide after 3 seconds
    }
  </script>
  <script>
    window.embeddedChatbotConfig = {
    chatbotId: "W_g3OYohwvFoV5lha0KUf",
    domain: "www.chatbase.co"
    }
    </script>
    <script
    src="https://www.chatbase.co/embed.min.js"
    chatbotId="W_g3OYohwvFoV5lha0KUf"
    domain="www.chatbase.co"
    defer>
    </script>
</body>
</html>
